<script setup>
	import { ref, watch } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'

	import { Menu as IconMenu, ArrowDown } from '@element-plus/icons-vue'

	import { useRouter } from 'vue-router'
	import { useRoleStore } from '@/stores/role'
	import { useTokenStore } from '@/stores/token'

	const router = useRouter()
	const tokenStore = useTokenStore()
	const roleStore = useRoleStore()
	const role = ref('')

	watch(
		() => roleStore.info,
		(r, o) => {
			if (r.role == 'true') {
				role.value = '管理员'
			} else {
				role.value = '商户'
			}
		},
		{ immediate: true }
	)
	const handleCommand = (command) => {
		if (command === 'logout') {
			ElMessageBox.confirm('确定退出登录吗？')
				.then(() => {
					tokenStore.removeToken()
					roleStore.removeInfo()
					ElMessage.success('退出成功')
					router.push('/login')
				})
				.catch(() => {
					ElMessage.info('取消')
				})
		} else {
			if (roleStore.info.role == 'true') {
				router.push('/home/manager/' + command)
			} else {
				router.push('/home/merchant/' + command)
			}
		}
	}
</script>

<template>
	<el-container class="layout-container-demo" style="height: 650px">
		<el-header style="text-align: right; font-size: 18px">
			<div class="toolbar">
				<div>{{ roleStore.info.userNickname }}({{ role }})</div>
				<el-dropdown trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						<el-avatar
							:size="50"
							:src="roleStore.info.userAvatar" />
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="info">
								个人信息
							</el-dropdown-item>
							<el-dropdown-item divided command="avatar">
								头像
							</el-dropdown-item>
							<el-dropdown-item divided command="logout">
								退出登录
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</el-header>

		<el-container>
			<router-view></router-view>
		</el-container>
	</el-container>
</template>

<style scoped>
	/* 头 */
	.layout-container-demo .el-header {
		position: relative;
		background-color: #c6e2ff;
		color: var(--el-text-color-primary);
	}
	.layout-container-demo .toolbar {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		right: 20px;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}

	/* 尾 */
	.layout-container-demo .el-footer {
		position: relative;
		background-color: #c6e2ff;
	}
	/* 侧边 */
	.layout-container-demo .el-aside {
		color: var(--el-text-color-primary);
	}
	.el-menu-vertical-demo {
		height: 100%;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
	/* 内容 */
	.layout-container-demo .el-main {
		padding: 0;
	}
</style>
